<template>
  <div class="status">
    <div id="myChart" :style="{width: '100%', height: '250px'}"></div>
    <div class="rate">
      <div class="strip" v-for="(item,key) in list" :key="key">
        <p>{{item.name}}</p>
        <div>
          <div :style="{width:change(item.value)}"></div>
        </div>
        <p>{{change(item.value)}}在使用</p>
      </div>
    </div>
    {{obj}}
  </div>
</template>

<script>
import echarts from "echarts/lib/echarts"; 
import "echarts/lib/chart/bar";           //引入柱状图
import "echarts/lib/chart/line";          //引入折线图
import "echarts/lib/component/title";   // 引入提示框组件、标题组件、工具箱组件。
import "echarts/lib/component/legend";
import "echarts/lib/component/toolbox";
import "echarts/lib/component/markPoint";
import "echarts/lib/component/tooltip";
import axios from "axios";
export default {
  data() {
    return {
      list: [],
      obj: []
    };
  },
  methods: {
    myEcharts() {
      let myChart = this.$echarts.init(document.getElementById("myChart"));
      myChart.setOption({
        title: {
          text: "接入设备占比",
          subtext: "",
          x: "center",
          y: "40",
          textStyle: {
            color: "#4CCBED",
            fontSize: 14,
            fontWeight: 0
          }
        },
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        legend: {
          x: "center",
          y: "center",
          //图例文字样式
          textStyle: {
            color: "#000",
            fontSize: 14,
            fontWeight: "700"
          },
          data: ["图例1", "图例2", "图例3", "图例4", "图例5"]
        },
        toolbox: {
          show: false
        },
        calculable: true,
        color: ["#D9C701", "#F38051", "#29A0F7", "#E7536B"], //自己设置扇形图颜色
        series: []
      });

      //
      axios.get("~@/../static/data.json").then(res => {
        this.list = res.data.data;
        var data = [];
        this.list.map((v, i) => {
          var obj = { value: v.value };
          data.push(obj);
        });
        // console.log(data);

        myChart.setOption({
          series: [
            {
              name: "图例占比",
              type: "pie",
              radius: [15, 60],
              center: [0, 150],
              roseType: "radius",
              x: "50%", // for funnel
              max: 40, // for funnel
              sort: "ascending", // for funnel
              data: data,
              //标线的属性设置，以及显示的文字
              itemStyle: {
                normal: {
                  label: {
                    show: true,
                    formatter: "设备名称\n{c}台",
                    textStyle: {
                      color: "",
                      fontSize: 12
                      // fontWeight:'700'
                    }
                  },
                  //标线长度，宽度
                  labelLine: {
                    show: true,
                    length: 15,
                    lineStyle: {
                      width: 1
                    }
                  }
                },
                emphasis: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: "rgba(0, 0, 0, 0.5)"
                }
              }
            }
          ]
        });
      });
    },
    //百分比
    change(v,i){
        var num = 0;
        this.list.map((m,n) => {
            num += m.value;
        })
        var x = v/num;
        return parseInt(x.toFixed(2)*100)+"%";
    },
  },
  mounted() {
    this.myEcharts();
    //添加的代码，通过resize()方法，监听
    window.addEventListener('resize',()=>{
      this.$echarts.init(document.getElementById('myChart')).resize()
    })

  },
};

</script>

<style lang="scss" scoped>
.status {
  width: 100%;
  height: 450px;
  border-radius: 10px;
  border: 1px solid #019EFF;
}
.rate {
  width: 100%;
  height: 180px;
  // background:red;
  .strip {
    display: flex;
    color: white;
    padding: 0 20px;
    font-size: 12px;
    box-sizing: border-box;
    align-items: center;
    > p:first-of-type {
      width: 50px;
    }
    > p:last-of-type {
      width: 70px;
    }
    > div {
      // width:100%;
      // height:auto;
      border: 1px solid #fa106d;
      flex: 1;
      height: 15px;
      margin: 0 5px;
      position: relative;
      box-sizing: border-box;
      border-radius: 0 5px 5px 0;

      > div {
        background: linear-gradient(to right, #121130 10%, #fa106d 60%);
        width: 90%;
        height: 15px;
        border-radius: 0 5px 5px 0;
        position: absolute;
        top: -1px;
        left: -1px;
      }
    }
  }
}

</style>